<?php
/**
 *      
 * 
 *  @author          Edmandie Samonte        (edmandie.samonte@gmail.com)
 *  @copyright       2011 
 * 
 */
?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Add New Employee</title>
        <script type="text/javascript" src="<?php echo load_js('jquery.min.js');?>" ></script>
        <script type="text/javascript" src="<?php echo load_js('jquery.validate.min.js');?>" ></script>
        <script type="text/javascript">
            $(document).ready(function(){
               $('.required').attr('title', 'Required Field');
            });
        </script>
        <style type="text/css" media="screen">
            
            @import url(<?php echo load_css('common.css');?>);
            @import url(<?php echo load_css('header.css');?>);
            @import url(<?php echo load_css('logged_in.css');?>);
            @import url(<?php echo load_css('add.css');?>);
            @import url(<?php echo load_css('jquery-ui/smoothness/jquery.ui.all.css');?>);
            @import url(<?php echo load_css('style.css');?>);
            
            
            
        </style>
    </head>
    <body>
        <div class="main-container">
            <?php require_once 'header.php';?>
            <span class="page-title">Add New Employee</span>
            <div class="clearfix">
                <div id="right">
                    <div class="navigation">
                        <div class="pane-title">Navigation</div>
                        <div class="controls">
                            <a href="<?php echo site_url('dashboard/');?>">Dashboard</a><br/>
                            <a href="<?php echo current_url();?>" class="selected">Add Employee</a>
                        </div>
                    </div>
                </div>
                <div id="left">
                    <?php if($step === '1'): ?>
                    <div class="pane-title"><span>Personal Details</span></div>
                    <form id="main-form" action="<?php echo current_url(); ?>" method="post">
                        <table class="form-table">
                            <tr>
                                <td class="label">
                                    <span>First Name</span>
                                </td>
                                <td>
                                    <input type="text" name="first_name" class="required input" />
                                </td>
                            </tr>
                            <tr>
                                <td class="label">
                                    <span>Middle Name</span>
                                </td>
                                <td>
                                    <input type="text" name="middle_name" class="required input" />
                                </td>
                            </tr>
                            <tr>
                                <td class="label">
                                    <span>Last Name</span>
                                </td>
                                <td>
                                    <input type="text" name="last_name" class="required input" />
                                </td>
                            </tr>
                            <tr>
                                <td class="label">
                                    <span>Position</span>
                                </td>
                                <td>
                                    <select name="position" class="input">
                                        <?php foreach($positions as $position): ?>
                                        <option value="<?php echo $position->posID?>" class="<?php echo $position->isAdmin; ?>"><?php echo $position->posName; ?></option>
                                        <?php endforeach; ?>
                                        <option value="O">Other</option>
                                            
                                    </select>
                                </td>
                            </tr>
                            <tr id="position_name" style="display:none">
                                <td class="label">
                                    <span>Position Name</span>
                                </td>
                                <td>
                                    <input type="text" name="position_name" class="input" />
                                </td>
                            </tr>
                            <tr id="is_admin" style="display:none">
                                <td class="label">
                                    <span>Admin</span>
                                </td>
                                <td>
                                    <input type="checkbox" name="is_admin" />
                                </td>
                            </tr>
                            <tr id="password">
                                <td class="label">
                                    <span>Password</span>
                                </td>
                                <td>
                                    <input type="password" name="password" class="input" />
                                </td>
                            </tr>
                            <tr id="confirm_password">
                                <td class="label">
                                    <span>Confirm Password</span>
                                </td>
                                <td>
                                    <input type="password" name="confirm_password" class="input" />
                                </td>
                            </tr>
                            <tr>
                                <td class="label">
                                    <span>Birthdate</span>
                                </td>
                                <td>
                                    <input type="text" id="picker"name="birthdate" class="input" value="<?php echo date('Y-m-d');?>"/>
                                </td>
                            </tr>
                            <tr>
                                <td class="label">
                                    <span>Address</span>
                                </td>
                                <td>
                                    <input type="text" name="address" class="required input" />
                                </td>
                            </tr>
                            <tr>
                                <td class="label">
                                    <span>Gender</span>
                                </td>
                                <td>
                                    <select name="gender" class="input">
                                        <option value="M">Male</option>
                                        <option value="F">Female</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td class="label">
                                    <span>Contact Number</span>
                                </td>
                                <td>
                                    <input type="text" name="contact_number" class="required input" />
                                </td>
                            </tr>
                            <tr>
                                <td class="label">
                                    <span>Email</span>
                                </td>
                                <td>
                                    <input type="text" name="email" class="required input" />
                                </td>
                            </tr>
                            <tr>
                                <td class="label">
                                    <span>Skills</span>
                                </td>
                                <td>
                                    <input type="text" name="skills" class="required input" />
                                </td>
                            </tr>
                            <tr>
                                <td class="label">
                                </td>
                                <td>
                                    <input type="submit"  class="gb" value="Submit"/>
                                </td>
                            </tr>
                        </table>
                        <p>
                                <input type="hidden" name="data_on" value="true" />
                                <input type="hidden" name="step" value="<?php echo $step;?>" />
                        </p>
                    </form>
                    <script type="text/javascript" src="<?php echo load_js('jquery.ui.core.min.js');?>"></script>
                    <script type="text/javascript" src="<?php echo load_js('jquery.ui.datepicker.min.js');?>"></script>
                    <script type="text/javascript">
                            $('input[name="birthdate"]').datepicker({
                                yearRange:"1930:c",
                                changeMonth:true,
                                changeYear:true,
                                dateFormat:"yy-mm-dd"
                            });
                            $('select[name="position"]').change(function(){
                                    if($('select[name="position"] option:selected').is('.T')){
                                        $('#password').show('medium',function(){
                                            $('input[name="password"]').addClass('required');
                                        });
                                        $('#confirm_password').show('medium',function(){
                                            $('input[name="confirm_password"]').addClass('required');
                                        });
                                        $('#position_name').hide('medium',function(){
                                            $('input[name="position_name"]').removeClass('required');
                                        });
                                        $('#is_admin').hide('medium',function(){
                                                
                                        });
                                    }else{
                                        $('#password').hide('medium',function(){
                                            $('input[name="password"]').removeClass('required');
                                        });
                                        $('#confirm_password').hide('medium',function(){
                                            $('input[name="confirm_password"]').removeClass('required');
                                        });
                                        $('#position_name').hide('medium',function(){
                                                $('input[name="position_name"]').removeClass('required');
                                        });
                                        $('#is_admin').hide('medium');
                                        if($('select[name="position"] option:selected').val() === 'O'){
                                            $('#position_name').show('medium',function(){
                                                $('input[name="position_name"]').addClass('required');
                                            });
                                            $('#is_admin').show('medium',function(){
                                                $('input[name="is_admin"]').change(function(){
                                                    if($('input[name="is_admin"]').is(':checked')){
                                                        $('#password').show('medium',function(){
                                                            $('input[name="password"]').addClass('required');
                                                        });
                                                        $('#confirm_password').show('medium',function(){
                                                            $('input[name="confirm_password"]').addClass('required');
                                                        });
                                                    }else{
                                                        $('#password').hide('medium',function(){
                                                            $('input[name="password"]').removeClass('required');
                                                        });
                                                        $('#confirm_password').hide('medium',function(){
                                                            $('input[name="confirm_password"]').removeClass('required');
                                                        });
                                                    }
                                                }).change();
                                            });
                                        }
                                    }
                            }).change();
                            $('#main-form').validate({
                                rules:{
                                    confirm_password:{
                                        equalTo:'input[name="password"]'
                                    },
                                    email:{
                                        email:true
                                    }
                                    
                                },
                                messages:{
                                    confirm_password:{
                                        equalTo:"Password does not match."
                                    },
                                    email:{
                                        email:"Invalid Email"
                                    }
                                    
                                }
                            });
                            
                    </script>
                    <?php endif; if($step == '2'): ?>
                    <div class="pane-title">Profile Picture</div>
                    <form action="<?php echo current_url();?>" method="post" enctype="multipart/form-data">
                        <table class="form-table">
                            <tr>
                                <td class="label">
                                    <span>Upload Picture</span>
                                </td>
                                <td>
                                    <input type="file" name="picture" class="input" />
                                </td>
                            </tr>
                            <tr>
                                <td class="label">
                                    
                                </td>
                                <td>
                                    <input type="submit" class="gb" value="Submit"/>
                                    <input type="button" id="skip_btn"class="gb" value="Skip"/>
                                </td>
                            </tr>
                        </table>
                        <p>
                                <input type="hidden" name="data_on" value="true" />
                                <input type="hidden" name="step" value="<?php echo $step;?>" />
                                <input type="hidden" name="eID" value="<?php echo $eID; ?>" />
                        </p>
                    </form>
                    <form id="skip"action="<?php echo current_url();?>" method="post" style="display:none;">
                        <p>
                                <input type="hidden" name="data_on" value="true" />
                                <input type="hidden" name="step" value="<?php echo $step;?>" />
                                <input type="hidden" name="eID" value="<?php echo $eID; ?>" />
                                <input type="hidden" name="skip" value="true" />
                        </p>
                    </form>
                    <script type="text/javascript">
                        $('#skip_btn').click(function(){
                            $('#skip').submit();
                        });
                    </script>
                    <?php elseif($step=='3'):?>
                    <script type="text/javascript" src="<?php echo load_js('tinybox.js');?>"></script>
                    <div class="pane-title">Educational Background</div>
                    <div id="out">
                        <table id="output" class="form-table">
                            
                        </table>
                    </div>
                    <div style="display: block">
                        <div id="educ-form">
                            <form id="main-form" action="#" method="post">
                            <table class="form-table">
                                <tr>
                                    <td class="label">
                                        Level
                                    </td>
                                    <td>
                                        <select id="level" class="input">
                                            <option>High School</option>
                                            <option>College</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="label">
                                        School
                                    </td>
                                    <td>
                                        <input type="text" name="school" class="required input" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="label">
                                        Remarks
                                    </td>
                                    <td>
                                        <input type="text" id="remarks" name="remarks" class="input" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="label">
                                        Start Year
                                    </td>
                                    <td>
                                        <input type="text" id="start_year" name="start_year"class="required input" maxlength="4" minlength="4"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="label">
                                        End Year
                                    </td>
                                    <td>
                                        <input type="text" id="end_year" name="end_year" class="required input" maxlength="4" minlength="4"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="label">
                                        
                                    </td>
                                    <td>
                                        <input type="hidden" id="is_send" value="false"/>
                                        <input type="button" id="add_btn" class="gb" value="Add" />
                                        <input type="button" id="add_btn" class="gb" value="Next" onClick="$('#skip').submit()"/>
                                    </td>
                                </tr>
                            </table>
                            </form>
                            <form id="skip"action="<?php echo current_url();?>" method="post" style="display:none;">
                                <p>
                                        <input type="hidden" name="data_on" value="true" />
                                        <input type="hidden" name="step" value="<?php echo $step;?>" />
                                        <input type="hidden" name="eID" value="<?php echo $eID; ?>" />
                                        <input type="hidden" name="skip" value="true" />
                                </p>
                            </form>
                            <script  type="text/javascript">
                                 var validator = $('#main-form').validate({
                                    rules:{
                                        start_year:{
                                            maxlength:4,
                                            minlength:4,
                                            digits:true
                                        },
                                        end_year:{
                                            maxlength:4,
                                            minlength:4,
                                            digits:true
                                        }
                                    },
                                    messages:{
                                        start_year:{
                                            maxlength:"Invalid Year",
                                            minlength:"Invalid Year",
                                            digits:"Invalid Year"
                                        },
                                        end_year:{
                                            maxlength:"Invalid Year",
                                            minlength:"Invalid Year",
                                            digits:"Invalid Year"
                                        }
                                    }
                                });
                                var send = function(){
                                    
                                    var data = {
                                        'school':$('input[name="school"]').val(),
                                        'remarks':$('#remarks').val(),
                                        'end_year':$('#end_year').val(),
                                        'start_year':$('#start_year').val(),
                                        'eID':'<?php echo $eID; ?>',
                                        'update':'0',
                                        'level':$('#level option:selected').val()
                                    };
                                    console.log(data);
                                    
                                    $.ajax({
                                        url: '<?php echo site_url('employee/educ')?>',
                                        type:'POST',
                                        dataType:'json',
                                        data:data,
                                        error:function(a,b,c){
                                            alert(a + ":" +b);
                                        },
                                        success:function(data){
                                           $('#output').append(
                                                "<tr><td class='label'>"+data.level+"</td><td>"+
                                                    "<span class='school'>"+data.school+"</span><br/>"+
                                                    "<span class='remarks'>"+data.remarks+"</span><br/>"+
                                                    "<span class='year'>"+data.start_year+"-"+data.end_year+"</span><br/>"+
                                                "</td></tr>"
                                            );
                                            validator.resetForm();
                                        }
                                    });
                                }
                               
                                $('#add_btn').click(function(){
                                    console.log(validator.form());
                                    if(validator.form()){
                                        send();
                                    }
                                    
                                });
                                
                            </script>
                        </div>
                    </div>
                    <?php elseif($step=='4'):?>
                    <div class="pane-title">Emergency Contact</div>
                    <form id="main-form"action="<?php echo current_url();?>" method="post" ">
                        <table class="form-table">
                            <tr>
                                <td class="label">
                                    <span>Name</span>
                                </td>
                                <td>
                                    <input type="text" name="ecName" class="required input" />
                                </td>
                            </tr>
                            <tr>
                                <td class="label">
                                    <span>Address</span>
                                </td>
                                <td>
                                    <input type="text" name="ecAddress" class="required input" />
                                </td>
                            </tr>
                            <tr>
                                <td class="label">
                                    <span>Contact Number</span>
                                </td>
                                <td>
                                    <input type="text" name="ecContactNumber" class="required input" />
                                </td>
                            </tr>
                            <tr>
                                <td class="label">
                                    <span>Remarks</span>
                                </td>
                                <td>
                                    <input type="text" name="ecRemarks" class="required input" />
                                </td>
                            </tr>
                            <tr>
                                <td class="label">
                                </td>
                                <td>
                                    <input type="submit" class="gb" value="Submit"/>
                                </td>
                            </tr>
                        </table>
                        <p>
                                <input type="hidden" name="data_on" value="true" />
                                <input type="hidden" name="step" value="<?php echo $step;?>" />
                                <input type="hidden" name="eID" value="<?php echo $eID; ?>" />
                        </p>
                    </form>
                    <script type="text/javascript">
                        $('#main-form').validate();
                    </script>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </body>
    
</html>
